<template>
    <div class="cartcontrol">
        <transition name="move">
            <div class="cart-decrease icon-remove_circle_outline" v-show="food.count>0" @click.stop.prevent="decreaseCart"></div>
        </transition>
        <div class="cart-count" v-show="food.count>0">{{ food.count }}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart($event)"></div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';

  export default {
    data() {
      return {

      };
    },
    components: {},
    props: {
        food: {
            type: Object
        }
    },
    methods: {
        addCart(event) {
            if (!this.food.count) {
               Vue.set(this.food, 'count', 1);
            } else {
                this.food.count++;
            }
            this.$emit('increment', event.target);
        },
        decreaseCart() {
            if (this.food.count) {
                this.food.count--;
            }
        }
    }
  };
</script>

<style lang="stylus">
    .cartcontrol
        font-size 0
        .cart-decrease, .cart-add
            display inline-block
            padding 6px
            line-height 24px
            font-size 24px
            color rgb(0,160,220)
            transform rotate(180deg)
        .cart-count
            display inline-block
            vertical-align top
            padding-top 6px
            line-height 26px
            text-align center
            font-size 10px
            color rgb(147,153,159)
            font-weight 700
        .move-enter-active, .move-leave-active {
            transition: all .4s linear
        }
        .move-enter,
        .move-leave-to {
            opacity: 0
            transform translate3d(24px,0,0) rotate(0)
        }
</style>
